/*评论组件 req: props.uniquekey*/
import React from 'react';
import {Row, Col} from 'antd';
import {Form, Input, Button, message, Card} from 'antd';
import '../../css/comments.css'

const FormItem = Form.Item;
const {TextArea} = Input;

class ComponentComments extends React.Component {
    constructor() {
        super();
        this.state = {
            comments: ''
        };
    };

    componentDidMount() {
        var myFetchOptions = {
            method: 'GET'
        };
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getcomments&uniquekey="
            + this.props.uniquekey, myFetchOptions)
            .then(response => response.json()).then(json => {
            this.setState({comments: json});
        });
    };

    handleSubmit(e) {
        e.preventDefault();
        message.config({
            top: 100,
            duration: 2,
            maxCount: 3,
        });
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
        let myFetchOptions = {
            method: 'GET'
        };
        if (!localStorage.userid || localStorage.userid == '') {
            message.error('请登录后再进行评论~')
            return
        }
        var formdata = this.props.form.getFieldsValue();
        fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=comment&userid="
            + localStorage.userid + "&uniquekey="
            + this.props.uniquekey + "&commnet="
            + formdata.remark, myFetchOptions)
            .then(response => response.json())
            .then(json => {
                message.success("评论成功！")
                this.componentDidMount();
                // 重置表单
                this.props.form.resetFields()
            })
    };

    render() {
        let {getFieldProps} = this.props.form;
        const {comments} = this.state;
        const commnetList = comments.length
            ? comments.map((comment, index) => (
                <div id={'comments-wrap'}>
                    <Card key={index}
                          title={`用户：${comment.UserName}`}
                          extra={<a href="#"> 发布于 {comment.datetime} </a>}>
                        <p>{comment.Comments}</p>
                    </Card>
                </div>
            ))
            : '没有加载到任何评论';
        return (
            <div class="comment">
                <Row>
                    <Col span={24}>
                        <Form onSubmit={this.handleSubmit.bind(this)}>
                            <FormItem label="您的评论">
                                <TextArea id={'comments-input'}
                                          type="textarea" rows={4}
                                          placeholder="我想说......"
                                          {...getFieldProps('remark', {
                                              rules: [{required: true, message: '评论不能为空哦~'}],
                                          })}/>
                            </FormItem>
                            <div style={{textAlign: 'center'}}>
                                <Button type="primary" htmlType="submit">提交评论</Button>
                            </div>
                        </Form>
                        <span className={'comments-header'}>评论列表：</span>
                        {commnetList}
                    </Col>
                </Row>
            </div>
        );
    };
}

// ant form 进行二次封装
export default ComponentComments = Form.create({})(ComponentComments);
